<template>
	<!-- 创建邀约 -->
	<view class="content">
		<view class="message-box">
			<view class="box">
				<view class="item">
					<view class="title">
						例子：
					</view>
					<view class="right-name">
						 招募球友，男，上午9点，到上午12点，AA制/发起者付费
					</view>
					
				</view>
				<view class="item">
					<view class="">
						招募启事:
					</view>
					<input class="right-name" type="text" v-model="fromData.name" placeholder="招募启事" />
				</view>
				<view class="item">
					<view class="left">
						邀约人数:
					</view>
					<picker @change="bindPickerChangeUserInfo" :value="fromData.userIndex" :range="fromData.kexuan">
						<view class="right-name">
							{{fromData.kexuan[fromData.userIndex]}}
						</view>
					</picker>
				</view>
				<view class="item">
					<view class="left">
						开始日期:
					</view>
					<view>
						<picker mode="date" :value="fromData.day" :start="fromData.startTime" @change="bindDateChange">
							<view class="right-name">{{fromData.day}}</view>
						</picker>
					</view>
				</view>
				<view class="item">
					<view class="left">
						开始时间:
					</view>
					<view>
						<picker mode="time" :value="fromData.startTime" @change="bindDateChangeStartTime"
							:end='fromData.endTime'>
							<view class="right-name">
								{{fromData.startTime}}
							</view>
						</picker>
					</view>
				</view>
				<view class="item">
					<view class="left">
						结束时间:
					</view>
					<view>
						<picker mode="time" :value="fromData.endTime" @change="bindDateChangeEndTime"
							:start='fromData.startTime'>
							<view class="right-name">{{fromData.endTime}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="senChuangjian()">
				确认发起邀约
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		getCreateZhaomu
	} from '@/api/yaoyue_api.js'

	const timeCheck = (daytime, time) => {
		let data = daytime + ' ' + time + ':00'
		return data
	}

	const fromData = reactive({
		openid: '',
		name: '',
		id: '',
		shuliang: 2,
		kexuan: [2, 4],
		userIndex: 0,
		startTime: '9:00',
		endTime: '12:00',
		startDay: '',
		day: ''
	})

	// 开始时间
	const bindDateChangeStartTime = (e) => {
		fromData.startTime = e.detail.value
	}
	// 结束时间
	const bindDateChangeEndTime = (e) => {
		fromData.endTime = e.detail.value
	}
	// 日期选择器
	const bindDateChange = (e) => {
		fromData.day = e.detail.value
	}

	// 用户人数选择
	const bindPickerChangeUserInfo = (e) => {
		console.log(e.detail.value);
		fromData.userIndex = e.detail.value
		fromData.shuliang = fromData.kexuan[e.detail.value]
	}


	const senChuangjian = () => {
		
		let data = {
			openid: fromData.openid,
			name: fromData.name,
			id: fromData.id,
			shuliang: fromData.shuliang,
			userStartTime: timeCheck(fromData.day, fromData.startTime),
			userEndTime: timeCheck(fromData.day, fromData.endTime)
		}
		
		console.log('原始数据', data);
		// 表单校验
		if (fromData.name == '') {
			uni.showModal({
				title: '警告',
				content: '请输入邀约名称'
			})
		} else if (fromData.name.length < 6) {
			uni.showModal({
				title: '警告',
				content: '邀约名称最少长度为6字符'
			})
		} else if (fromData.name.length >= 14) {
			uni.showModal({
				title: '警告',
				content: '邀约名称最大长度为14字符'
			})
		} else {

			getCreateZhaomu(data).then((res) => {
				console.log(res);
				if (res.result == 'ok') {
					uni.showModal({
						title:'ok',
						content:'创建完成！'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						});
					},2000)
				} else{
					uni.showModal({
						title:'提示',
						content:'未知错误，请会报管理员'
					})
				}
			})
		}
	}

	// 日期初始化
	const dayStart = () => {
		let currentDate = new Date();

		// 获取当前年份
		let year = currentDate.getFullYear();

		// 获取当前月份 (月份从 0 开始，因此需要加 1)
		let month = currentDate.getMonth() + 1;

		// 获取当前日期
		let day = currentDate.getDate();

		let data = `${year}-${month}-${day}`

		fromData.startDay = data
		fromData.day = data
		return data
	}


	onLoad((option) => {
		fromData.id = option.id
		uni.getStorage({
			key: 'openid',
			success: function(res) {
				fromData.openid = res.data.openid
			}
		})
		dayStart()
		console.log(option);
	})
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;

		.message-box {
			padding: 20rpx;

			.box {
				background-color: #53c3ff;
				padding: 20rpx;
				border-radius: 20rpx;
				height: 700rpx;
				flex-direction: column;
				display: flex;
				justify-content: space-around;

				.item {
					background-color: white;
					padding: 20rpx;
					border-radius: 10rpx;
					display: flex;

					.title {
						width: 160rpx;
					}

					.right-name {
						margin-left: 60rpx;
					}
				}
			}
		}

		.btn-box {
			padding: 0rpx 40rpx 40rpx 40rpx;
			position: fixed;
			bottom: 0;

			.btn {
				width: calc(100vw - 80rpx);
				text-align: center;
				padding: 40rpx 0;
				background-color: #53c3ff;
				border-radius: 20rpx;
				color: white;
			}
		}
	}
</style>